"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = FlexExample;

var _react = _interopRequireDefault(require("react"));

var _design = require("@discuzq/design");

require("./index.scss");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var Row = _design.Flex.Row,
    Col = _design.Flex.Col;

function FlexExample() {
  return /*#__PURE__*/_react.default.createElement("div", {
    className: "page"
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "flex-section flex-align-section"
  }, /*#__PURE__*/_react.default.createElement(_design.Divider, {
    orientation: "left"
  }, "Align center"), /*#__PURE__*/_react.default.createElement(Row, {
    justify: "center",
    align: "center"
  }, /*#__PURE__*/_react.default.createElement(Col, {
    style: {
      padding: 0
    }
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "box-align"
  }, "col-4")), /*#__PURE__*/_react.default.createElement(Col, {
    style: {
      padding: 0
    }
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "box-align"
  }, "col-4")), /*#__PURE__*/_react.default.createElement(Col, {
    style: {
      padding: 0
    }
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "box-align"
  }, "col-4")), /*#__PURE__*/_react.default.createElement(Col, {
    style: {
      padding: 0
    }
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "box-align"
  }, "col-4"))), /*#__PURE__*/_react.default.createElement(_design.Divider, {
    orientation: "left"
  }, "Align stretch"), /*#__PURE__*/_react.default.createElement(Row, {
    justify: "space-around",
    align: "stretch"
  }, /*#__PURE__*/_react.default.createElement(Col, {
    style: {
      padding: 0
    }
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "box-align"
  }, "col-4")), /*#__PURE__*/_react.default.createElement(Col, {
    style: {
      padding: 0
    }
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "box-align"
  }, "col-4")), /*#__PURE__*/_react.default.createElement(Col, {
    style: {
      padding: 0
    }
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "box-align"
  }, "col-4")), /*#__PURE__*/_react.default.createElement(Col, {
    style: {
      padding: 0
    }
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "box-align"
  }, "col-4"))), /*#__PURE__*/_react.default.createElement(_design.Divider, {
    orientation: "left"
  }, "Align flex-start"), /*#__PURE__*/_react.default.createElement(Row, {
    justify: "flex-start",
    align: "flex-start"
  }, /*#__PURE__*/_react.default.createElement(Col, {
    style: {
      padding: 0
    }
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "box-align"
  }, "col-4")), /*#__PURE__*/_react.default.createElement(Col, {
    style: {
      padding: 0
    }
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "box-align"
  }, "col-4")), /*#__PURE__*/_react.default.createElement(Col, {
    style: {
      padding: 0
    }
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "box-align"
  }, "col-4")), /*#__PURE__*/_react.default.createElement(Col, {
    style: {
      padding: 0
    }
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "box-align"
  }, "col-4"))), /*#__PURE__*/_react.default.createElement(_design.Divider, {
    orientation: "left"
  }, "Align flex-end"), /*#__PURE__*/_react.default.createElement(Row, {
    justify: "flex-end",
    align: "flex-end"
  }, /*#__PURE__*/_react.default.createElement(Col, {
    style: {
      padding: 0
    }
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "box-align"
  }, "col-4")), /*#__PURE__*/_react.default.createElement(Col, {
    style: {
      padding: 0
    }
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "box-align"
  }, "col-4")), /*#__PURE__*/_react.default.createElement(Col, {
    style: {
      padding: 0
    }
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "box-align"
  }, "col-4")), /*#__PURE__*/_react.default.createElement(Col, {
    style: {
      padding: 0
    }
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "box-align"
  }, "col-4"))), /*#__PURE__*/_react.default.createElement(_design.Divider, {
    orientation: "left"
  }, "Align baseline"), /*#__PURE__*/_react.default.createElement(Row, {
    justify: "space-around",
    align: "baseline"
  }, /*#__PURE__*/_react.default.createElement(Col, {
    style: {
      padding: 0
    }
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "box-align"
  }, "col-4")), /*#__PURE__*/_react.default.createElement(Col, {
    style: {
      padding: 0
    }
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "box-align"
  }, "col-4")), /*#__PURE__*/_react.default.createElement(Col, {
    style: {
      padding: 0
    }
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "box-align"
  }, "col-4")), /*#__PURE__*/_react.default.createElement(Col, {
    style: {
      padding: 0
    }
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "box-align"
  }, "col-4")))));
}